<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计科20-2 杨光耀 演示</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css">
    <style>
        /* 自定义样式 */
        .word-cloud-div {
            background-color: white;
            height: 500px;
            width: auto;
        }

        .word-cloud-div canvas {
            height: 100%;
            width: 100%;
        }

        .prompt-input {
            margin-right: 10px;
            height: 250px;
        }

        .left-section {
            background-color: whitesmoke;
            padding: 20px;
            min-height: 800px;
        }

        .right-section {
            background-color: whitesmoke;
            padding: 20px;
            min-height: 500px;
        }

        .result-images {
            background-color: gray;
            height: 360px;
            display: flex;
            flex-wrap: wrap;
        }

        .image-box {
            background-color: black;
            width: 200px; /* 设置容器的宽度 */
            height: 300px; /* 设置容器的高度 */
            overflow: hidden; /* 隐藏溢出的部分 */
            border: 1px solid #ccc;

            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;
            margin: 2px;
        }

        .tags_set_btn {
            opacity: 0;
            transition: opacity 0.3s;

            position: absolute;
            top: 525px;
            right: 870px;
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        .tags_set_btn:hover {
            opacity: 1;
        }

        .image-box img {
            width: 100%; /* 图像宽度填充窗户 */
            height: auto; /* 根据宽度自动调整高度，保持纵横比 */
            display: block; /* 删除默认的底部间距 */
        }

        .form-group select, label {
            margin: 1px 0;
        }

        /* 可以根据需要添加其他样式 */
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 左侧部分 -->
        <div class="col-md-6 left-section">
            <!-- 上半部分（词云图） -->
            <div id="wordCloud" class="word-cloud-div"></div>
            <!-- 下半部分（文本框） -->

            <textarea id="prompts_input" class="form-control prompt-input" rows="5" placeholder="在这里输入提示词"></textarea>
            <button class="btn btn-primary tags_set_btn" id="tags_set_btn" type="button">生成tag</button>
        </div>

        <!-- 右侧部分 -->
        <div class="col-md-6 right-section">
            <!-- 上半部分（图片显示区域） -->
            <div class="result-images" id="result"></div>
            <textarea id="console_output" class="form-control" rows="5" placeholder="控制台输出" disabled></textarea>
            <div class="form-group">
                <label for="selectModel">模型：</label>
                <select class="form-control" id="selectModel">
                    {% for idx, model_name in model_list %}
                        <option value="{{ idx }}">{{ model_name }}</option>
                    {% endfor %}
                </select>
                <label for="selectGenNum">生成个数：</label>
                <select class="form-control" id="selectGenNum">
                    {% for num in num_list %}
                        <option value="{{ num }}">{{ num }}</option>
                    {% endfor %}
                </select>
                <label for="selectSize">尺寸：</label>
                <select class="form-control" id="selectSize">
                    {% for size_str in size_list %}
                        <option value="{{ size_str }}">{{ size_str }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- 下半部分（提交按钮） -->
            <button type="button" id="submit_btn" class="btn btn-primary mt-3">提交</button>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JavaScript和jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.2.2/wordcloud2.min.js"></script>
<script type="text/javascript" src="{{ url_for('ygy.static', filename='js/echarts-wordcloud.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('ygy.static', filename='js/js_for_sd_ai.js') }}"></script>

<!-- 自定义样式 -->
</body>
</html>
